<template>
  <div id='RightMenu'>
    <div class='rMenu'>
      <div v-if="userInPath.includes(path)" style="cursor: grab;" v-show="port">
        <el-dropdown>
          <span class="el-dropdown-link" ref="charType">
            <img ref='user' class='rMenuImg' src='src/assets/icon/star.png' @click='User' title='用户' alt='user'>
          </span>
          <el-dropdown-menu slot="dropdown">
            <div v-if="!landed">
              <el-dropdown-item @click.native="land">-登录-</el-dropdown-item>
            </div>
            <div v-else>
              <el-dropdown-item style="color:darkcyan;text-align:center;cursor:default;font-family:SimSun;">
                {{ userName }}
              </el-dropdown-item>
              <el-dropdown-item @click.native="selfInfo">个人资料</el-dropdown-item>
              <el-dropdown-item @click.native="updPwd">修改密码</el-dropdown-item>
              <el-dropdown-item @click.native="exit">退出登录</el-dropdown-item>
            </div>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div v-if="path==='/'">
        <RouterLink v-for='(menu,key) in menus' :key='key' :to='menu.link'>
          <img class='rMenuImg' :src='menu.src' :title='menu.title' :alt='menu.alt'>
        </RouterLink>
      </div>
      <div v-else>
        <RouterLink to='' v-show="port">
          <div v-if="path==='/webSave'">
            <img ref='rMenuImg' class='rMenuImg' src='src/assets/icon/aircraft.png' title='管理' alt='webSave'
                 @click="toManage(path)">
          </div>
          <div v-else-if="path==='/blog'">
            <img ref='rMenuImg' class='rMenuImg' src='src/assets/icon/dayLog.png' title='管理' alt='dayLog'
                 @click="toManage(path)">
          </div>
        </RouterLink>
      </div>
    </div>
    <!-- 登录弹窗 -->
    <div class="popup" v-show="showPopup&&port">
      <div class="popup-content">
        <p style="margin:-5% 0 0 100%;cursor:pointer" @click="closeLandPopup">X</p>
        <h2>{{ popupTip }}</h2>
        <form @submit.prevent="submitLandForm">
          <div class="form-group">
            <label for="username">Username:</label>
            <input type="text" id="username" v-model="form.username" required>
          </div>
          <div class="form-group">
            <label for="password">Password:</label>
            <input type="password" id="password" v-model="form.password" required>
          </div>
          <div class="form-group">
            <button type="submit">Submit</button>
            <button @click="closeLandPopup">Cancel</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import CodeWebJs from "../../assets/js/CodeWeb";

export default {
  name: 'RightMenu',

  data() {
    return {
      menus: [
        {
          alt: 'webSave', title: '导航', link: '/space/webSave',
          src: 'http://codeworld.fun/res/icons/aircraft.ico'
        },
      ],
      goto: '/webSave',
      path: this.$route.path,
      port: window.location.port,
      userInPath: ["/", "/user", "/create"],
      landed: false,
      userName: '管理员',
      rMenuImg: '../../assets/icon/point.png',
      showPopup: false,
      popupTitle: "Enter your credentials:",
      popupTip: "Enter your credentials:",
      form: {
        username: '',
        password: ''
      },
      formKey: {
        username: 'freecode',
        password: ''
      },
      userPath: window.location.protocol + "//" + window.location.hostname + ":" + window.location.port + "/#/user",

    }
  },
  created() {
    //console.log("userPath：" + this.userPath)
    this.Init();
  },
  methods: {
    Init() {
      const username = localStorage.getItem("landUser")
      const password = localStorage.getItem("landPwd")
      if (username === this.formKey.username && password === this.formKey.password + CodeWebJs.getDateToKey(new Date(), "month")) {
        localStorage.setItem("landed", true)
        this.landed = true;
      } else {
        localStorage.setItem("landed", false)
        this.landed = false;
      }
    },
    User() {
      this.Init();
      if (this.landed) {
        if (this.path !== "/user") {
          window.open(this.userPath);
        } else {
          //location.reload()
          this.$router.go(0)
        }
      } else {
        this.confirmLand();
      }
    },
    land() {
      this.openLandPopup();
    },
    selfInfo() {
      this.User();
    },
    updPwd() {
      this.Init();
      //todo
    },
    exit() {
      this.$confirm("确认退出登录吗？", "提示", {
        iconClass: "el-icon-user blue",//自定义图标样式
        showClose: true,//是否显示右上角关闭按钮
        type: "warning",//提示类型  success/info/warning/error
      }).then(() => {
        //确认操作
        localStorage.removeItem("landUser")
        localStorage.removeItem("landPwd")
        this.Init();
        this.$message.success('退出成功')
        setTimeout(() => this.$router.push("/"), 3000);
      }).catch((err) => {
        this.$message.info('取消退出')
      });

    },
    openLandPopup(message) {
      if (!this.landed) {
        this.showPopup = true;
      }
    },
    closeLandPopup() {
      this.popupTip = this.popupTitle;
      this.showPopup = false;
    },
    submitLandForm() {
      //console.log(this.formKey.password, this.form.password);
      localStorage.setItem("landed", true)
      if (this.form.username === this.formKey.username && this.form.password === this.formKey.password + CodeWebJs.getDateToKey(new Date(), "month")) {
        localStorage.setItem("landed", true)
        this.landed = true;
        localStorage.setItem("landUser", this.form.username)
        localStorage.setItem("landPwd", this.form.password)
        this.$message.success('登录成功')
        this.showPopup = false;
      } else {
        if (this.form.username !== this.formKey.username) {
          this.popupTip = "用户名错误";
        } else if (this.form.password !== this.formKey.password + CodeWebJs.getDateToKey(new Date(), "month")) {
          this.popupTip = "密码错误";
          console.log("密码错误：" + this.form.password)
        }
      }
      setTimeout(() => this.closeLandPopup(), 1000);
    },
    toManage(path) {
      if (this.port) {
        if (this.landed) {
          window.open(window.location.protocol + "//" + window.location.hostname + ":" + window.location.port + "/#" + path + "/manage");
        } else {
          this.confirmLand();
        }
      }
    },
    confirmLand() {
      this.$confirm("未登录请先登录！", "提示", {
        iconClass: "el-icon-user blue",//自定义图标样式
        showClose: true,//是否显示右上角关闭按钮
        type: "warning",//提示类型  success/info/warning/error
      }).then(() => {
        //确认操作
        this.openLandPopup();
      }).catch((err) => {
        this.$notify.info('取消登录')
      });
    },
  },
}
</script>

<style>
#RightMenu {
  width: 400px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-top: -35px;
  margin-right: 10px;

}

.rMenu {
  margin-top: -35px;
  display: flex;
  float: right;
}

.rMenuImg {
  width: 35px;
  height: 32px;
  margin-right: 15px;
}

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.popup-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
}

.form-group {
  margin-bottom: 10px;
}

.form-group button {
  margin-left: 50px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

a {
  color: snow;
  text-decoration: none;
}

</style>
